<template class="all">
  <div class="container-my">
    <!--上传模块-->
    <el-card class="box-card-left">
      <div slot="header" class="clearfix">
        <span>上传文件</span>
      </div>
      <el-form :model="ruleForm" status-icon ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <el-form-item label="任务码" prop="pass">
          <el-input type="taskCode" v-model="ruleForm.folder" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="上传文件">
          <el-upload
            class="upload-demo"
            drag
            ref="upload"
            :on-preview="handlePreview"
            :on-remove="handleRemove"
            :with-credentials='true'
            :file-list="fileList"
            :data="this.ruleForm"
            :on-success="uploadSuccesss"
            :on-error="uploadError"
            :auto-upload="false"
            action="http://127.0.0.1:8887/bjgl/b-file-upload/upload"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">可上传任意类型的文件，但是一个任务码只支持上传一个文件，如需一次上传多个文件请打包成压缩文件进行上传，注:文件大小不超过100M</div>
          </el-upload>
          <!--        <el-upload
                    class="upload-demo"
                    ref="upload"
                    action="http://127.0.0.1:8880/bjgl/b-file-upload/upload"
                    :on-preview="handlePreview"
                    :on-remove="handleRemove"
                    :with-credentials='true'
                    :file-list="fileList"
                    :data="this.ruleForm"
                    :on-success="uploadSuccesss"
                    :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                  </el-upload>-->
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">提交</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!--下载模块-->
    <el-card class="box-card-right">
      <div slot="header" class="clearfix">
        <span>下载文件</span>
      </div>
      <el-form class="download_form"  label-width="80px">
        <el-form-item label="文件码">
          <el-input v-model="downloadForm.fileCode"></el-input>
        </el-form-item>
        <el-form-item >
          <el-button type="primary" class="download_bottun" @click="downloadByCode()">下载</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
  import {downloadFileByCode} from "../../api/fileUpload";
  import {toDownLoad} from "../../utils/uploadUtil";
  export default {
    name: "",
    data() {
      return {
        baseUrl: '',
        downloadForm:{
          fileCode:''
        },
        ruleForm: {
          folder: ''
        },
        fileList: []
      }
    },
    methods: {
      //上传失败
      uploadError(){
        this.$message.error("未知异常，上传失败")
      },
      //上传文件
      submitForm(formName) {
        if (this.fileList == []) {
          this.$message.warning("请上传文件！");
        } else {
          this.$refs.upload.submit();
        }

      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      //上传成功回调
      uploadSuccesss(response) {
        console.log(response)
        this.$refs.upload.clearFiles()
        this.ruleForm.folder = ''
        if (response.code == 20000) {
          this.$message.success("上传成功")
        } else {
          this.$message.error(response.msg)
        }

      },
      //重置表单
      resetForm() {
        this.ruleForm.folder = ''
        this.fileList = []
      },
      //通过文件码下载文件
      downloadByCode(){
        downloadFileByCode(this.downloadForm.fileCode).then(res=>{
          console.log(res)
          this.binaryDownload(res)
        })
      },
      //下载函数
      binaryDownload(res) {
        if (!res.data) {
          this.$message.error("文件下载失败!")
          return
        }
        if (res.code != 20000) {
          this.$message.error(res.msg)
          return
        }
        toDownLoad(res);
      }
    }
  }
</script>

<style>

  .all {
    height: 100%;
  }

  .container-my{
    margin-top: 50px;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  section {

  }

  .box-card-right {
    width: 45%;
    margin-right: 30px;
  }

  .box-card-left {
    width: 45%;
    margin-left: 30px;

  }

  .download_bottun{

  }
</style>
